<template>
    <div class="modal fade" id="selfRoleDataTemp" tabindex="-1" role="dialog" aria-labelledby="roleAuthorized1Model" aria-hidden="true">
        <div class="modal-dialog" style="width: 800px;">
            <div class="modal-content" >
                <div class="modal-header">
                    <button type="button" class="close" @click="closeSelfRoleDataModal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel1">角色授权【{{this.$store.getters.selectRoleInfo.roleName}}】</h4>
                </div>
                <div style="padding: 10px;padding-bottom: 0;">
                    <div class="data-top">
                        <Checkbox  v-model="checkOrg" @on-change="checkDetail = !checkOrg">使用本部机构级别数据权限</Checkbox>
                        <Select style="width:100px" v-model="deptPermission" :disabled="checkDetail">
                            <Option value="1" >全部</Option>
                            <Option value="2" >本部</Option>
                        </Select>
                        <p class="data-ps"><i class="fa fa-exclamation-circle warning-icon"></i>该方式是将业务层的报备数据进行集合，个人数据权限设置请选择“可见的分销商报备数据”
                            请确认业务层已有设置业务人员可见哪些分销商权限，否则可能导致没有数据</p>
                    </div>
                    <!-- -->
                    <div class="data-down">
                        <Checkbox v-model="checkDetail" @on-change="checkOrg=!checkOrg">设定可见的分销商报备数据</Checkbox><span class="data-ps"><i class="fa fa-exclamation-circle warning-icon"></i>该方式是设定该角色可见哪些分销商所报备的数据</span>
                        <div class="data-down-detail">
                            <div class="data-down-mask" v-if="checkOrg"></div>
                            <div class="select-ord">
                                <div class="org-left">
                                    <a class="select-all" @click="selectAll(true)">全部选择</a><a class="select-all" @click="selectAll(false)">全部取消</a>
                                </div>
                                <div class="org-right">
                                    <Input  placeholder="机构名称" style="width: 150px" v-model="searchText" />
                                    <button type="button" class="btn checkedBtn surBtn"  @click="searchOrgList">查询</button>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="data-select">
                                <ul>
                                    <li class="data-f1" v-for="(rc,index) in orgDataList">
                                        <div class="data-detail">
                                            <div class="data-checkbox"><Checkbox size="small" v-model="rc.selected" @on-change="(v)=>{checkOnChange(rc,v)}"></Checkbox></div>
                                            <div class="data-detail-f1">
                                                <Icon size="16" color="#ff5e5e"  v-if="rc.children && rc.children.length > 0 &&rc.show" @click="()=>{rc.show = rc.show==true?false:true;$forceUpdate()}" type="md-remove-circle" />
                                                <Icon size="16" color="#ff5e5e"  v-if="rc.children && rc.children.length > 0 &&!rc.show" @click="()=>{rc.show = rc.show==true?false:true;$forceUpdate()}" type="md-add-circle" />
                                                {{rc.name}}
                                            </div>
                                            <div class="clearfix"  v-bind:class="{  'background-data': index%2==0 }"></div>
                                        </div>

                                        <ul v-if="rc.children && rc.children.length > 0" v-show="rc.show">
                                            <li class="data-f2" v-for="(rc2,index) in rc.children">
                                                <div class="data-detail">
                                                    <div class="data-checkbox"><Checkbox size="small" v-model="rc2.selected" @on-change="(v)=>{checkOnChange(rc2,v)}"></Checkbox></div>
                                                    <div class="data-detail-f2">
                                                        <Icon size="16" color="#ff5e5e"  v-if="rc2.children && rc2.children.length > 0 &&rc2.show" @click="()=>{rc2.show = rc2.show==true?false:true;$forceUpdate()}" type="md-remove-circle" />
                                                        <Icon size="16" color="#ff5e5e"  v-if="rc2.children && rc2.children.length > 0 &&!rc2.show" @click="()=>{rc2.show = rc2.show==true?false:true;$forceUpdate()}" type="md-add-circle" />
                                                        {{rc2.name}}
                                                    </div>
                                                    <div class="clearfix"  v-bind:class="{'background-data': index%2==0 }"></div>
                                                </div>
                                                <ul v-if="rc2.children && rc2.children.length > 0" v-show="rc2.show">
                                                    <li class="data-f2" v-for="(rc3,index) in rc2.children">
                                                        <div class="data-detail">
                                                            <div class="data-checkbox"><Checkbox size="small" v-model="rc3.selected"></Checkbox></div>
                                                            <div class="data-detail-f3">{{rc3.name}}</div>
                                                            <div class="clearfix"></div>
                                                        </div>
                                                    </li>
                                                    <div class="clearfix" v-bind:class="{  'background-data': index%2==0 }"></div>
                                                </ul>
                                            </li>
                                            <div class="clearfix" ></div>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn checkedBtn surBtn"  @click="confirmData" >确定</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "selRoleDataTemp",
        props:["roleData"],
        data(){
            return{
                checkOrg:true,
                checkDetail:false,
                dataArea:'',
                selectArray:[],
                deptPermission:'',
                orgDataList:[],
                searchText:'',
                props: {
                    stripe: true,
                    border: false,
                    showHeader: false,
                    showSummary: false,
                    showRowHover: true,
                    showIndex: false,
                    treeType: true,
                    isFold: true,
                    expandType: false,
                    selectionType: true,
                },
                columns: [
                    {
                        title: '',
                        key: 'name',
                        width: '400px',
                    }
                ]
            }
        },
        mounted(){
            // this.loadOrgTreeData();

            console.log( this.roleData.deptPermission);
        },
        methods:{
            selectAll(checked){
                this.setChildren(this.roleData.roleCaseMembers,checked);
            },
            setChildren(children,checked){
                for(let i=0;i<children.length;i++){
                    children[i].selected = checked;
                    if(children[i].children){
                        this.setChildren(children[i].children,checked);
                    }
                }
            },
            setParams(children){
                children.forEach((item,index) => {
                  if(item.selected){
                      this.selectArray.push(item.id);
                  }
                  if(item.children){
                      this.setParams(item.children);
                  }
                });
            },
            checkOnChange(item,flag){
                item.selected = flag;
                if(item.children){
                    this.setChildren(item.children,flag);
                }
            },
            confirmData(){
                this.selectArray = []
                console.log("confirm.....");
                this.orgDataList.forEach((item,index) => {
                    this.deleteShow(item);
                })
                let parmas = {
                    deptPermission :'',
                    roleCaseMembers : this.orgDataList,
                    selected : []
                }
                if(this.checkOrg){
                    parmas.deptPermission = this.deptPermission;
                }else{
                    parmas.deptPermission = 0;
                }
                //获取选中的组织
               this.setParams(this.orgDataList);
               // this.setParams(this.roleData.roleCaseMembers);
                parmas.selected = this.selectArray;
                console.log(parmas);
                $("#selfRoleDataTemp").modal("hide");
                this.$emit("getDataParams",parmas);
            },
            setDataShow(){
                this.checkOrg = this.roleData.deptPermission != 0;
                this.checkDetail = this.roleData.deptPermission == 0;
                console.log("this.checkOrg -> " + this.checkOrg);
                console.log("this.checkDetail -> " + this.checkDetail);
                console.log(this.roleData);
                if(this.checkOrg){
                    this.deptPermission = this.roleData.deptPermission;
                }else{
                    this.deptPermission = 0;
                }
                console.log("this.deptPermission  ==>" +this.deptPermission);
                this.orgDataList = this.roleData.roleCaseMembers;
                this.orgDataList.forEach((item,index)=>{
                    this.setShow(item);
                });
            },
            setShow(children){
              children.show = false;
              if(typeof(children.children) != 'undefined'){
                  children.children.forEach((item,index) => {
                      this.setShow(children.children);
                  })
              }
            },
            deleteShow(children){
                delete children.show;
                if(typeof(children.children) != 'undefined'){
                    children.children.forEach((item,index) => {
                        this.setShow(children.children);
                    })
                }
            },
            toggle(show){
                if (typeof(show) == "undefined"){
                    show = true;
                }
                show = !show;
                console.log(this.roleData.roleCaseMembers)
                console.log("show ===========" + show);
            },
            closeSelfRoleDataModal(){
                $("#selfRoleDataTemp").modal("hide");
            },
            searchOrgList(){
                this.orgDataList = [];
                if(!this.searchText){
                    this.orgDataList = this.roleData.roleCaseMembers;
                    return;
                }
                this.roleData.roleCaseMembers.forEach((item,index) => {
                    if(item.name.search(this.searchText) != -1){
                        let data = {
                            id:item.id,
                            merchantId:item.merchantId,
                            name:item.name,
                            other:item.other,
                            pId:item.pId,
                            selected:item.selected
                        }
                        this.orgDataList.push(data);
                    }
                    if(typeof(item.children) != 'undefined'){
                        this.searchChildren(this.searchText,item.children);
                     }
                })
            },
            searchChildren(text,children){
                console.log(typeof(children));
                if(typeof(children) != 'undefined'){
                    children.forEach((item,index) => {
                        let data = {
                            id:item.id,
                            merchantId:item.merchantId,
                            name:item.name,
                            other:item.other,
                            pid:item.pId,
                            selected:item.selected
                        }

                        if(data.name.search(text) != -1){
                            this.orgDataList.push(data);
                        }
                        if(typeof(item.children) != 'undefined'){
                            // data.children = item.children;
                            this.searchChildren(text,item.children);
                        }
                    })
                }
            }

        }
    }
</script>

<style scoped>
    .data-top{margin: 10px 10px 30px 10px;}
    .data-down{margin: 10px;}
    .warning-icon{font-size: 16px;color:#ff5e5e;margin-right: 5px;}
    .select-all{color: #f87242; margin: 0 5px;}
    .org-left{float: left;}
    .org-right{float: right;}
    .select-ord {line-height: 36px;margin: 5px 0;}
    .data-down-mask{width: 100%;height: 100%;position: absolute;top: 0;left:0;    opacity: 0.2;background: #000;z-index: 100;}
    .data-down-detail{position: relative;}
    .data-select{max-height: 500px;overflow-y: scroll;}
    .data-detail{border:1px solid #ececec}
    .data-detail-f1{float: left;margin:5px 15px;}
    .data-detail-f2{float:left;margin:5px 40px;}
    .data-detail-f3{float:left;margin:5px 65px;}
    .data-checkbox{float:left;}
    .background-data{background:#e8eaec;}
    .data-ps{color:#999;padding-left:10px;}
</style>